<template>
  <el-container style="position: absolute;top:0;left:0;bottom:0;right:0">
    <!-- 头部 -->
    <el-header class="d-flex align-items-center border-bottom">
      <div class="d-flex align-items-center">
        <el-select
          v-model="searchForm.order"
          placeholder="请选择图片排序方式"
          size="mini"
        >
          <el-option
            label="区域一"
            value="shanghai"
          ></el-option>
          <el-option
            label="区域二"
            value="beijing"
          ></el-option>
        </el-select>
        <el-input
          v-model="searchForm.keyword"
          size="mini"
          placeholder="输入相册名称"
          style="width:180px"
          class="ml-4"
        ></el-input>
        <el-button
          type="success"
          size="mini"
          class="ml-1 mr-auto"
        >搜索</el-button>

        <el-button
          type="success"
          size="mini"
          @click="openAlbumModel(false)"
        >立即创建</el-button>
        <el-button
          type="warning"
          size="mini"
          @click="uploadModel = true"
        >上传图片</el-button>
        <el-button
          type="info"
          size="mini"
          v-if="chooseList.length"
          @click="unChoose"
        >取消选中</el-button>
        <el-button
          type="danger"
          size="mini"
          v-if="chooseList.length"
          @click="imageDel({all:true})"
        >批量删除</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 左侧相册 -->
      <el-aside
        width="200px"
        class="bg-white border-right"
        style="position: absolute;top: 60px;bottom: 0;"
      >
        <ul class="list-group list-group-flush">
          <albumItem
            v-for="(item,index) in albums"
            :key="index"
            :item="item"
            :index="index"
            :active="albumsIndex == index"
            @change="albumChange"
            @edit="openAlbumModel"
            @del="albumDel"
          ></albumItem>
        </ul>
      </el-aside>
      <el-container>
        <el-main style="position: absolute;left: 200px;right: 0;top: 60px;bottom: 0px;">
          <el-row :gutter="10">
            <el-col
              :span="24"
              :lg="6"
              :md="8"
              :sm="12"
              v-for="(item,index) in imageList"
              :key="index"
            >
              <el-card
                class="box-card mt-3 position-relative "
                shadow="hover"
                :body-style="{padding:0}"
              >
                <div
                  class="border"
                  :class="item.check?'border-danger':'' "
                >
                  <span
                    v-if="item.check"
                    class="badge badge-danger"
                    style="position: absolute;top: 0;right: 0;z-index:100"
                  >{{item.checkNum}}</span>
                  <el-image
                    style="width: 100%; height: 150px;"
                    :src="item.url"
                    fit="cover"
                    lazy
                    @click="choose(item)"
                  ></el-image>
                  <div
                    class="w-100 text-white position-absolute px-1"
                    style="background:rgba(0,0,0,0.5);margin-top: -34px;height: 30px;line-height: 30px;"
                  >
                    <small>{{item.name}}</small>
                  </div>
                  <div class="p-2 text-center">
                    <el-button-group>
                      <el-button
                        icon="el-icon-view"
                        size="mini"
                        @click="previewImage(item)"
                      ></el-button>
                      <el-button
                        icon="el-icon-edit"
                        size="mini"
                        @click="imageEdit(item,index)"
                      ></el-button>
                      <el-button
                        icon="el-icon-delete"
                        size="mini"
                        @click="imageDel({index:index})"
                      ></el-button>
                    </el-button-group>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改或者创建相册 -->
    <el-dialog
      :title="albumModelTitle"
      :visible.sync="albumModel"
    >
      <el-form
        ref="form"
        :model="albumForm"
        label-width="80px"
      >
        <el-form-item label="相册名称">
          <el-input
            v-model="albumForm.name"
            size="medium"
            placeholder="请输入相册名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="相册排序">
          <el-input-number
            v-model="albumForm.order"
            :min="0"
            size="medium"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="albumModel = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmAlbumModel"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 上传图片模态框 -->
    <el-dialog
      title="上传图片"
      :visible.sync="uploadModel"
    >
      <div class="text-center">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div
            class="el-upload__tip"
            slot="tip"
          >只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 图片放大 -->
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
  </el-container>
</template>

<script>
import albumItem from "@/components/image/album_item";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    albumItem,
    ElImageViewer
  },
  data() {
    return {
      searchForm: {
        order: "",
        keyword: ""
      },
      albums: [], // 相册
      albumsIndex: 0, // 当前选中的相册
      // 修改或者创建模态框数据
      albumForm: {
        name: "",
        order: 0
      },
      albumModel: false,
      albumEditIndex: -1, // 判断相册是修改|创建

      // 上传图片
      uploadModel: false,

      // 右侧图片列表
      imageList: [],

      // 图片预览
      srcList: [],
      showViewer: false,

      chooseList: []
    };
  },
  created() {
    this.__init();
  },
  computed: {
    albumModelTitle() {
      return this.albumEditIndex > -1 ? "修改相册" : "创建相册";
    }
  },
  methods: {
    __init() {
      for (var i = 0; i < 20; i++) {
        this.albums.push({
          name: "相册" + i,
          num: Math.floor(Math.random() * 100),
          order: 0
        });
      }
      // 右侧图标
      for (let i = 0; i < 30; i++) {
        this.imageList.push({
          id: i,
          url: "@/assets/img/meinv.jpeg",
          name: `图片${i}`,
          check: false,
          checkNum: 0 // 当前选中的是第几个
        });
      }
    },
    // 切换相册
    albumChange(index) {
      this.albumsIndex = index;
    },
    // 打开相册修改/创建框
    openAlbumModel(obj) {
      // 修改
      if (obj) {
        let { item, index } = obj;
        // 初始化表单
        this.albumForm.name = item.name;
        this.albumForm.order = item.order;
        this.albumEditIndex = index;
        // 打开模态框
        return (this.albumModel = true);
      }
      // 创建
      this.albumForm = {
        name: "",
        order: 0
      };
      this.albumEditIndex = -1;
      this.albumModel = true;
    },
    // 点击确定修改/创建相册
    confirmAlbumModel() {
      // 判断是否为修改
      if (this.albumEditIndex > -1) {
        this.albumEdit();
        return (this.albumModel = false);
      }
      // 追加相册
      this.albums.unshift({
        name: this.albumForm.name,
        order: this.albumForm.order,
        num: 0
      });
      this.albumModel = false;
    },
    // 图片预览
    closeViewer() {
      this.showViewer = false;
    },
    previewImage(item) {
      this.srcList.push(item.url);
      this.showViewer = true;
    },
    // 修改相册
    albumEdit() {
      this.albums[this.albumEditIndex].name = this.albumForm.name;
      this.albums[this.albumEditIndex].order = this.albumForm.order;
    },

    // 删除相册
    albumDel(index) {
      this.$confirm("是否删除该相册", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.albums.splice(index, 1);
        this.$message({
          message: "删除成功",
          type: "success"
        });
      });
    },

    // 修改图片名称
    imageEdit(item, index) {
      this.$prompt("请输入新名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: item.name,
        inputValidator(val) {
          if (val === "") {
            return "图片名称不能为空";
          }
        }
      }).then(({ value }) => {
        item.name = value;
        this.$message({
          message: "修改成功",
          type: "success"
        });
      });
    },

    // 删除当前图片 | 批量删除
    imageDel(obj) {
      this.$confirm(obj.all ? "是否删除选中图片" : "是否删除该图片", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (obj.all) {
          let list = this.imageList.filter(v => {
            return !this.chooseList.some(s => {
              return s.id === v.id;
            });
          });
          this.imageList = list;
          this.chooseList = [];
        } else {
          this.imageList.splice(obj.index, 1);
        }
        this.$message({
          message: "删除成功",
          type: "success"
        });
      });
    },

    // 选中图片
    choose(item) {
      // 之前未选中
      if (!item.check) {
        // 加入选中
        this.chooseList.push({ id: item.id, url: item.url });
        // 计算序号
        item.checkNum = this.chooseList.length;
        // 修改状态
        item.check = !item.check;
        return;
      }
      // 取消选中
      // 找到在chooseList的索引
      let i = this.chooseList.findIndex(v => v.id === item.id);
      if (i === -1) return;
      // 重新计算序号
      let len = this.chooseList.length;
      if (i + 1 < len) {
        // 取消中间的某一个
        for (let j = i; j < len; j++) {
          let no = this.imageList.findIndex(
            v => v.id === this.chooseList[j].id
          );
          if (no > -1) {
            this.imageList[no].checkNum--;
          }
        }
      }
      // 删除
      this.chooseList.splice(i, 1);
      // 修改状态
      item.check = false;
      // 重置序号
      item.checkNum = 0;
    },
    // 取消选中
    unChoose() {
      this.imageList.forEach(img => {
        // 找到所有选中的图片
        let i = this.chooseList.findIndex(item => {
          return item.id === img.id;
        });
        if (i > -1) {
          // 取消选中样式，选中排序归零
          img.check = false;
          img.checkNum = 0;
          // 从chooseList中移除
          this.chooseList.splice(i, 1);
        }
      });
    }
  }
};
</script>

<style lang="css">
</style>